<template>
	<view class="container">
		<view class="bg_img">
			<view class="item" v-for="(item,index) in 220" :key="index">
				<image class="img" src="/static/logo.png" mode=""></image>
			</view>
		</view>
		<view class="mine-back">
			<view class="big-circular"></view>
		</view>
		<view class="mineTop">
			<view class="flex-verticality" @click="checkLogin">
				<image class="touImg" :src="user.headImg?user.headImg:'/static/logo.png'" mode="">
				</image>
				<view class="theName">
					<view class="theName-name">
						{{user.nickname?user.nickname:'贵宾专车'}}
					</view>
					<view class="theName-phone" v-if="user.mobPhone">
						{{user.mobPhone.replace(/(\d{4})\d{4}(\d{3})/, '$1****$2')}}
					</view>
				</view>
			</view>
		</view>
	
		<view class="wallet">
      <view class="box">
        <view class="title">
          <view>钱包</view>  
          <view>去充值></view>  
        </view> 
        <view class="user_money">
          <view class="desc">账号余额</view>  
          <view class="fx">
            <view class="num">4236</view>
            <view>元</view>
          </view>  
        </view> 
      </view>  
    </view>
		
		<view class="centerDad-box">
			<view class="theView" @tap="toPath({url: '../order/index'})">
				<image class="center-img" src="../../static/center/order.png"></image>
				<text class="my-din">订单</text>
				<image class="right-img youIcon" src="../../static/index/right.png"></image>
			</view>
			<view class="theView" @tap="toPath({url: '../partner/index'})">
				<image class="center-img" src="../../static/center/cooperate.png"></image>
				<text class="my-din">合作商申请</text>
				<image class="right-img youIcon" src="../../static/index/right.png"></image>
			</view>
			<view class="theView" @tap="toPath({url: '../feedback/index'})">
				<image class="center-img" src="../../static/center/feedback.png"></image>
				<text class="my-din">意见与反馈</text>
				<image class="right-img youIcon" src="../../static/index/right.png"></image>
			</view>
			<view class="theView" style="border: none;">
				<image class="center-img" src="../../static/center/contact.png"></image>
				<text class="my-din">联系我们</text>
				<image class="right-img youIcon" src="../../static/index/right.png"></image>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				user: {}
			}
		},
		onShow() {
			this.user = uni.getStorageSync('FF_USER_INFO');
		},
		methods: {
			toPath(val) {
				this.$util.checkToken().then(res => {
					uni.navigateTo({
						url: val.url
					})
				})
			},
			//点击头像触发
			checkLogin() {
				this.$util.checkToken();
			}
		}
	};
</script>

<style lang="less">
	page {
		background-color: #F7F7F7;
		line-height: 1;
	}

	.container {
		.bg_img {
			width: 100vw;
			height: 100vh;
			position: absolute;
			top: 0;
			display: flex;
			flex-wrap: wrap;
			overflow: hidden;
			z-index: 3;

			.item{
				transform: rotate(28deg);
				width: 8%;
				height: 4%;
				margin: 22rpx;
				.img {
					width: 100%;
					height: 100%;
					opacity: 0.2;
				}
			}
		}
	}

	.mine-back {
		background: linear-gradient(0deg, #f8eedc 28%, #f6f2ec 60%);
		height: 410upx;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.big-circular {
		width: 353upx;
		height: 353upx;
		background: linear-gradient(-90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
		opacity: 0.05;
		border-radius: 50%;
		position: absolute;
		left: 166upx;
		bottom: -114upx;
	}

	.mineTop {
		margin-top: 200rpx;
		position: relative;
	}

  .wallet{
    position: relative;
    z-index: 999;
    padding: 28rpx;
    width: 94vw;
    margin: 0 auto;
    background: linear-gradient(to bottom, #fff1d5, #fff 48%);
    margin: 24rpx auto;
    border-radius: 14rpx;
    .box{
      .title{
        display: flex;
        justify-content: space-between;
        font-size: 30upx;
        font-weight: 600;
      }
      .user_money{
        background: linear-gradient(44deg,#e6ba86 17.05%,#e9c294 30.9%,#fbbf7a 48.98%,#e9c499 66.74%,#e2af73 78.58%); 
        border-radius: 14rpx;
        padding: 24rpx 24rpx 48rpx 14rpx;
        color: #fff;
        margin-top: 26upx;
        .desc{
          font-size: 22upx;
          margin-bottom: 44rpx;
        }
        .fx{
          display: flex;
          align-items: baseline;
          .num{
            font-size: 54upx;
            font-weight: bold;
          }
        }
      }
    }
  }

	.touImg {
		display: block;
		overflow: hidden;
		width: 120upx;
		height: 120upx;
		border-radius: 50%;
		margin-left: 34upx;
		z-index: 999;
	}

	.theName {
		color: white;
		margin-left: 30upx;
		z-index: 999;
		color: black;
	}

	.theName-name {
		font-size: 32upx;
		font-weight: bold;
	}

	.theName-phone {
		font-size: 30upx;
		margin-top: 28upx;
	}

	.centerDad-box {
		background: #FFFFFF;
		position: relative;
		width: 94vw;
    margin: 0 auto;
		z-index: 999;
    border-radius: 14rpx;
	}

	.center-img {
		width: 30upx;
		height: 30upx;
	}

	.right-img {
		position: absolute;
		right: 0;
	}

	.my-din {
		margin-left: 20upx;
		font-size: 28upx;
		color: #333333;
	}

	.theView {
		display: flex;
		align-items: center;
		position: relative;
		padding: 30upx 0;
		margin: 0 30rpx;
	}

	.youIcon {
		width: 12upx;
		height: 20upx;
	}
</style>